<template>
  <div id="PersonalAssets">
    <div class="header_info">
      <div class="avatar">
        <img
          v-if="userInfo"
          width="60px" height="60px" alt=""
          :src="`${userInfo.passportAccountInfo.avatar}`">
      </div>
      <div class="right">
        <div class="top_info">
          <span class="top nickname">{{userNickName}}</span>
          <div class="top member">
            <img
              width="22px" alt=""
              :src="userInfo.passportLevel.levelIconUrl"
            >
            <span>{{userInfo.passportLevel.levelName}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="base_assets_info" v-if="data">
      <div class="card_info">
        <div class="item">
          <span class="title">持卡人：</span><span>{{data.cardName}}</span>
        </div>
        <div class="item">
          <span class="title">卡号：</span>
          <span>{{data.cardNo}}</span>
          <span class="bank_name">{{data.bankName}}</span>
        </div>
      </div>
      <div class="base_money_info">
        <el-row>
          <el-col :span="3">积分</el-col>
          <el-col :span="9">{{data.creditTotalValue}}</el-col>
          <el-col :span="3">佣金</el-col>
          <el-col :span="9">{{data.accumulatedReward}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">优惠券</el-col>
          <el-col :span="9">{{data.discountTicketCount}}</el-col>
          <el-col :span="3">活动券</el-col>
          <el-col :span="9" class="full_row">{{data.eventTicketCount}}</el-col>
        </el-row>
      </div>
    </div>
    <div class="record_tabs_block">
      <el-tabs
        v-model="cLittleTab" type="card"
        @tab-click="clickTab(cLittleTab)"
      >
        <el-tab-pane
          v-for="tab in tabsConfig"
          :key="tab.idx"
          :label="tab.name"
          :name="tab.idx"
          v-loading="tabsConfig[cLittleTab].loading"
          element-loading-text="加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <component
            v-if="cView === tab.component"
            :is="cView"
            :tabConfig="tabsConfig[cLittleTab]"
          >
          </component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import IntegralRecord from '@/components/pages/user/personal_assets/IntegralRecord'
import Distributors from '@/components/pages/user/personal_assets/Distributors'
import EarningsRecord from '@/components/pages/user/personal_assets/EarningsRecord'
import WithdrawalRecord from '@/components/pages/user/personal_assets/WithdrawalRecord'
import Ticket from '@/components/pages/user/personal_assets/Ticket'
export default {
  name: 'PersonalAssets',
  components: {
    IntegralRecord, Distributors, EarningsRecord, WithdrawalRecord, Ticket
  },
  props: ['userNickName', 'data', 'userInfo'],
  data () {
    return {
      memberIcon: ['1', '2', '3', '4'],
      personAssetsInfo: null,
      cView: 'IntegralRecord', // 当前激活的组件
      cLittleTab: '0',
      tabsConfig: [ // tabs参数
        {
          idx: '0', name: '积分记录', loading: false, component: 'IntegralRecord', data: null
        },
        {
          idx: '1', name: '分销商', loading: false, component: 'Distributors', data: null
        },
        {
          idx: '2', name: '收益记录', loading: false, component: 'EarningsRecord', data: null
        },
        {
          idx: '3', name: '提现记录', loading: false, component: 'WithdrawalRecord', data: null
        },
        {
          idx: '4', name: '奖券', loading: false, component: 'Ticket', data: null
        }
      ]
    }
  },
  methods: {
    clickTab (cTab) {
      this.cView = this.tabsConfig[cTab].component
    }
  }
}
</script>

<style scoped lang="scss">
  $tableBorder: 1px solid #f0f0f0;
  #PersonalAssets {
    .header_info {
      display: -webkit-flex; /* Safari */
      display: flex;
      align-items: center;
      .avatar {
        margin-right: 20px;
        overflow: hidden;
        img {
          border-radius: 50px;
        }
      }
      .right {
        .top_info {
          display: -webkit-flex; /* Safari */
          display: flex;
          align-items: center;
          color: #3b3a42;
          .top {
            margin-right: 10px;
          }
          .nickname {
            font-size: 16px;
          }
          .member {
            display: -webkit-flex; /* Safari */
            display: flex;
            align-items: center;
            padding: 2px;
            font-size: 12px;
            color: #000;
            img {
              z-index: 10;
            }
            span {
              display: inline-block;
              padding: 2px 6px 2px 8px;
              line-height: 14px;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              background: #efeff0;
              transform: translateX(-4px);
            }
          }
          .qrcode {
            font-size: 14px;
            span {
              display: inline-block;
              padding: 2px;
              cursor: pointer;
            }
          }
        }
        .creattime_block {
          margin-top: 12px;
          font-size: 12px;
          color: #999;
        }
      }
    }
    .base_assets_info {
      margin-top: 30px;
      .card_info {
        .item {
          margin-top: 10px;
          font-size: 14px;
          color: #3b3a42;
          span {
            display: inline-block;
            &.title {
              color: #000;
              font-weight: 500;
            }
            &:first-child {
              width: 80px;
            }
            &.bank_name {
              margin-left: 10px;
            }
          }
        }
      }
      .base_money_info {
        margin-top: 20px;
        .el-row {
          border-top: $tableBorder;
          border-left: $tableBorder;
          border-right: $tableBorder;
          &:last-child {
            border-bottom: $tableBorder;
          }
          .el-col {
            box-sizing: border-box;
            padding: 20px;
            &:not(:last-child) {
              border-right: $tableBorder;
            }
          }
        }
      }
    }
    .record_tabs_block {
      margin-top: 20px;
    }
  }
</style>
